<template>
<div class="bottom">
      <ul>
    <li v-for="(v,i) in this.$store.state.arr"  :key="i" @click="fun(i)" :class="v.style?'red':''">
    <span :class=v.cla></span>
    <span>{{v.text}}</span>
    </li>
      </ul>
  </div>
</template>

<script>

export default {
    careated () {
        //在页面加载时读取localStorage里的状态信息
        if (localStorage.getItem("datahome") ) {
            //replaceState替换数据 Object.assign合并对象
            this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("datahome"))))
        } 
        //在页面刷新时将vuex里的信息保存到localStorage里
        window.addEventListener("beforeunload",()=>{
            localStorage.setItem("datahome",JSON.stringify(this.$store.state))
        })
        
      },
methods:{
   fun(i){
       switch(this.$store.state.arr[i].text){    
            case "首页":
                this.$store.commit("uparr",i)
                this.$router.push("/home/recommended");
                break
            case "分类":
                 this.$store.commit("uparr",i)
                this.$router.push("/classification");
                break
            case "发现":
                this.$store.commit("uparr",i)
                this.$router.push("/found");
                break
            case "学习":
                this.$store.commit("uparr",i)
                this.$router.push("/learning");
                break
            case "账号":
                this.$store.commit("uparr",i)
                if(localStorage.getItem("token")){
                    this.$router.push("/myhome");
                }else{
                    this.$router.push("/account");
                }
                break
        }   
   }
}
}
</script>

<style scoped>
@import "../Iconlibrary/iconfont.css";
.bottom{
    width: 100%;
    height: .8rem;
    position: fixed;
    bottom: 0;
    background-color: #ffffff;
    border-top: 1px solid #bbb9be;
}
.bottom>ul{
    margin-top: .1rem;
    display: flex;
    justify-content: space-evenly;
}
.bottom>ul>li>span{
 display: block;
 text-align: center;
 margin: .05rem auto;
}
a{
    color: #2b2b2b;
}
.bottom>ul>li>span:nth-child(1){
    font-size: .23rem;
}
.bottom>ul>li>span:nth-child(2){
    font-size: 0.08rem;
}
.red{
    color: #ef2d24;
}
</style>